<template>
  <div class="internal">
    <div class="titles flex">
      <div>内部成员及职责:</div>
      <div class="btn flex">
        <div @click="searchChange('重置')">重置</div>
        <div @click="searchChange('查询')">查询</div>
      </div>
    </div>
    <div class="condition">
      <div class="flex">
        <div>人员姓名</div>
        <el-input placeholder="请输入人员姓名" v-model="List.Name" />
      </div>
      <div class="flex">
        <div>所属(可多选)</div>
        <el-select multiple v-model="List.OwnedBy" placeholder="请选择所属">
          <el-option v-for="item in belongList" :key="item" :label="item" :value="item" />
        </el-select>
      </div>
      <div class="flex">
        <div>是指挥部</div>
        <el-select v-model="List.isCommandTeam" placeholder="请选择指挥部">
          <el-option v-for="item in whetherList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div class="flex">
        <div>是工作组</div>
        <el-select v-model="List.isWorkTeam" placeholder="请选择工作组">
          <el-option v-for="item in whetherList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
    </div>
    <div class="Line"></div>
    <div class="Btn flex">
      <div></div>
      <div class="BtnList flex">
        <div @click="operate('新增')">
          <i class="el-icon-plus"></i>新增
        </div>
        <div @click="operate('删除')">
          <i class="el-icon-minus"></i>删除
        </div>
      </div>
    </div>
    <div class="table">
      <el-table :data="tableData" style="width: 100%" height="700px" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50" />
        <el-table-column label="序号" width="50" align="center">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column v-for="item in tableList" :key="item.prop" :prop="item.prop" :label="item.label"
          :width="item.width" align="center" />
        <el-table-column prop="属于指挥部" label="指挥部" align="center">
          <template slot-scope="scope">
            <div>{{ scope.row.属于指挥部 === true ? '是' : '否' }} </div>
          </template>
        </el-table-column>
        <el-table-column prop="属于工作组" label="工作组" align="center">
          <template slot-scope="scope">
            <div>{{ scope.row.属于工作组 === true ? '是' : '否' }} </div>
          </template>
        </el-table-column>
        <el-table-column prop="所属于" label="所属" width="220" align="center">
          <template slot-scope="scope">
            <div class="tagBox">
              <div v-for="item in scope.row.所属于" :key="item">{{ item }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="50" align="center">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <internalDialog ref="dialog" :title="title" :List="dialogList" @addEventListener="addEventListener" />
  </div>
</template>
<script>
import internalDialog from './internalDialog.vue'
import axios from "axios";
export default {
  name: 'internal',
  components: {
    internalDialog
  },
  data() {
    return {
      List: {
        Name: "",
        OwnedBy: [],
        isCommandTeam: "",
        isWorkTeam: "",
      },
      belongList: ['运输组', '抢修组', '接待组', '专家组', '治安组', '消防队', '医疗救护组', '物资供应组', '应急监测组', '应急救援指挥部', '生产运行及通信联络组'],
      whetherList: [
        { value: '1', label: '是' },
        { value: '0', label: '否' },
      ],
      tableList: [
        { prop: '应急角色', label: '应急角色', width: '80' },
        { prop: '人员姓名', label: '人员姓名', width: '' },
        { prop: '公司职务', label: '公司职务', width: '' },
        { prop: '所在单位', label: '所在单位', width: '90' },
        { prop: '联系电话', label: '联系电话', width: '110' },
      ],
      tableData: [],
      multipleSelection: [],
      title: "",
      dialogList: {},
      oldData: {}
    }
  },
  methods: {
    async getTable(obj) {
      let OwnedBy = obj.OwnedBy.join(";")
      const options = {
        method: 'POST',
        url: 'http://10.199.98.2:8086/3DInterface_D/Business/EmergManage/Platform/jyrynb_bb_zsgc',
        data: {
          TIP: 'select',
          SQL: `select role 应急角色, Name 人员姓名, Title 公司职务, Unit 所在单位, Contact 联系电话, isCommandTeam 属于指挥部, isWorkTeam 属于工作组, OwnedBy 所属 from imp_emergmanage.emerg_rescue_mbrs_in WHERE Name LIKE CONCAT('%', '${obj.Name}', '%') and ownedby LIKE CONCAT('%', '${OwnedBy}', '%') and isCommandTeam LIKE CONCAT('%', '${obj.isCommandTeam}', '%') and isWorkTeam LIKE CONCAT('%', '${obj.isWorkTeam}', '%')`
        }
      };
      axios.request(options).then(response => {
        let data = response.data.data;
        let arr = []
        response.data.data.forEach(item => {
          arr.push(item.所属.split(";").map(item => item.slice(0, 6)));
          item.所属 = item.所属.split(/[,;\s]+/)
        })
        data = data.map((item, index) => ({ ...item, 所属于: arr[index] }));
        this.tableData = data
      }).catch(function (error) {
        console.error(error);
      });
    },
    searchChange(val) {
      if (val === '重置') {
        this.List = {
          Name: "",
          OwnedBy: [],
          isCommandTeam: "",
          isWorkTeam: "",
        }
        this.getTable(this.List)
      } else if (val === '查询') {
        this.getTable(this.List)
      }
    },
    operate(val) {
      if (val === '新增') {
        this.$refs.dialog.dialogVisible = true;
        this.title = '新增'
        this.dialogList = {
          应急角色: "",
          人员姓名: "",
          公司职务: "",
          所在单位: "",
          联系电话: "",
          属于指挥部: "",
          属于工作组: "",
          所属: [],
        };
      } else if (val === '删除') {
        const list = this.multipleSelection.map(item => {
          return `('${item.应急角色}', '${item.人员姓名}', '${item.公司职务}', '${item.所在单位}', '${item.联系电话}', '${item.属于指挥部 === true ? '1' : '0'}', '${item.属于工作组 === true ? '1' : '0'}', '${item.所属.join(";")}')`;
        }).join(',');
        console.log(list)
        if (this.multipleSelection.length === 0) {
          this.$message({
            message: '请选择要删除的数据',
            type: 'warning'
          });
          return
        } else {
          this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
            center: true,
          }).then(() => {
            const options = {
              method: 'POST',
              url: 'http://10.199.98.2:8086/3DInterface_D/Business/EmergManage/Platform/jyrynb_bb_zsgc',
              data: {
                TIP: 'delete',
                SQL: `delete from imp_emergmanage.emerg_rescue_mbrs_in WHERE (Role, Name, Title, Unit, Contact, isCommandTeam, isWorkTeam, OwnedBy) IN (${list})`
              }
            };

            axios.request(options).then(response => {
              if (response.data.message === "success") this.$message.success("删除成功");
              this.getTable(this.List)
            }).catch(function (error) {
              console.error(error);
            });
          })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除",
              });
            });
        }
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleClick(row) {
      this.$refs.dialog.dialogVisible = true;
      this.title = '编辑'
      row.属于指挥部 = row.属于指挥部 === true ? '是' : '否';
      row.属于工作组 = row.属于工作组 === true ? '是' : '否';
      this.dialogList = JSON.parse(JSON.stringify(row));
      this.oldData = JSON.parse(JSON.stringify(row));
    },
    addEventListener(obj, title) {
      let OwnedBy;
      if (obj.所属) OwnedBy = obj.所属.join(";")
      console.log(obj)
      if (title === '编辑') {
        let oldOwnedBy = this.oldData.所属.join(";")
        if (obj.属于工作组) obj.属于工作组 = obj.属于工作组 === '是' ? '1' : '0';
        if (obj.属于指挥部) obj.属于指挥部 = obj.属于指挥部 === '是' ? '1' : '0';
        this.oldData.属于工作组 = this.oldData.属于工作组 === '是' ? '1' : '0';
        this.oldData.属于指挥部 = this.oldData.属于指挥部 === '是' ? '1' : '0';
        const options = {
          method: 'POST',
          url: 'http://10.199.98.2:8086/3DInterface_D/Business/EmergManage/Platform/jyrynb_bb_zsgc',
          data: {
            TIP: 'UPDATE',
            SQL: `UPDATE imp_emergmanage.emerg_rescue_mbrs_in SET Role = '${obj.应急角色}', Name = '${obj.人员姓名}', Title = '${obj.公司职务}', Unit = '${obj.所在单位}', Contact = '${obj.联系电话}', 
            isCommandTeam = '${obj.属于指挥部}', isWorkTeam = '${obj.属于工作组}', OwnedBy = '${OwnedBy}' 
            WHERE Role = '${this.oldData.应急角色}' and Name = '${this.oldData.人员姓名}' and Title = '${this.oldData.公司职务}' and Unit = '${this.oldData.所在单位}' and Contact = '${this.oldData.联系电话}' and isCommandTeam = '${this.oldData.属于指挥部}' and isWorkTeam = '${this.oldData.属于工作组}'and OwnedBy = '${oldOwnedBy}'`
          }
        };
        axios.request(options).then(response => {
          console.log(response.data);
          if (response.data.message === "success") this.$message.success("编辑成功");
          this.getTable(this.List)
        }).catch(function (error) {
          console.error(error);
        });
      } else if (title === '新增') {
        const options = {
          method: 'POST',
          url: 'http://10.199.98.2:8086/3DInterface_D/Business/EmergManage/Platform/jyrynb_bb_zsgc',
          data: {
            TIP: 'INSERT',
            SQL: `INSERT INTO imp_emergmanage.emerg_rescue_mbrs_in ( Role, Name, Title, Unit, Contact, isCommandTeam, isWorkTeam, OwnedBy) VALUES ('${obj.应急角色}', '${obj.人员姓名}','${obj.公司职务}', '${obj.所在单位}','${obj.联系电话}', '${obj.属于指挥部}','${obj.属于工作组}', '${OwnedBy}')`
          }
        };
        axios.request(options).then(response => {
          if (response.data.message === "success") this.$message.success("添加成功");
          else this.$message.error("添加失败");
          this.getTable(this.List)
        }).catch(function (error) {
          console.error(error);
        });
      }

    }
  },
  mounted() {
    this.getTable(this.List)
  }
}

</script>
<style lang="scss" scoped>
.internal {
  width: (1047 / 1720) * 100%;
  // width: 1047px;
  height: 971px;
  padding-top: 24px;
  font-family: "Source Han Sans CN";
  font-style: normal;

  .flex {
    display: flex;
    justify-content: space-between;
  }

  .titles {
    margin: 0 auto;
    width: (983 / 1047) * 100%;
    height: 32px;
    color: #163154;
    font-size: 16px;
    font-weight: 700;
    line-height: 32px;

    .btn {
      width: 155px;

      div {
        width: 73px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        font-size: 14px;
        font-weight: 350;
        border-radius: 4px;

        &:hover {
          cursor: pointer;
        }

        &:nth-child(1) {
          border: 1px solid #165DFF;
          color: rgba(22, 93, 255, 0.70);
        }

        &:nth-child(2) {
          background: #165DFF;
          color: #FFF;
          font-weight: 700;
        }
      }
    }
  }

  .condition {
    margin: 24px auto;
    width: (983 / 1047) * 100%;
    height: 107px;
    border-radius: 1.792px;
    background: rgba(22, 93, 255, 0.05);
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    &>div {
      width: 390px;
      height: 32px;
      line-height: 32px;
      margin-right: 50px;
      margin-bottom: 10px;

      &:nth-child(2n) {
        width: 470px;
        margin-right: 0;

        ::v-deep .el-input {
          width: 380px !important;
        }
      }

      &>div {
        color: #6A788D;
        font-size: 14px;
        font-weight: 400;

        /* 157.143% */
        &:nth-child(1) {
          width: 80px;
          text-align: right;
        }

      }
    }

    ::v-deep .el-input {
      width: 300px !important;
    }

    ::v-deep .el-input--medium .el-input__inner,
    .el-input--medium .el-input__inner {
      height: 32px !important;
      line-height: 32px !important;
    }
  }

  .Line {
    margin: 0 auto;
    width: (983 / 1047) * 100%;
    height: 1px;
    background-color: #165DFF;
  }

  .Btn {
    width: (983 / 1047) * 100%;
    margin: 24px auto 0;
  }

  .BtnList {
    width: 142px;
    height: 24px;

    &>div {
      width: 68px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      border-radius: 4px;

      &:hover {
        cursor: pointer;
      }

      i {
        margin-right: 5px;
      }

      &:nth-child(1) {
        background: #165DFF;
        color: #FFF;
        font-size: 14px;
        font-weight: 700;
      }

      &:nth-child(2) {
        border: 1px solid #165DFF;
        color: rgba(22, 93, 255, 0.70);
        font-size: 14px;
        font-weight: 350;
      }
    }
  }

  .table {
    margin: 12px auto;
    width: (983 / 1047) * 100%;
    height: 700.25px;

    ::v-deep .el-table__body-wrapper {
      overflow-x: hidden;
    }

    ::v-deep .el-table .el-table__header-wrapper th,
    .el-table .el-table__fixed-header-wrapper th {
      background-color: rgba(22, 93, 255, 0.05) !important;
      color: #6A788D;
      font-size: 14px;
      font-weight: 500;
    }

    .tagBox {
      display: flex;
      justify-content: flex-start;

      &>div {
        // width: 100px;
        margin-right: 5px;
        border-radius: 3.583px;
        background: rgba(22, 93, 255, 0.15);
        padding: 0 8px;
        color: #163154;
        font-size: 14px;
        font-weight: 400;
        white-space: nowrap;
        overflow: hidden;
        // text-overflow: ellipsis;

        &:last-child {
          margin-right: 0;
        }
      }
    }

    ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
      background: rgba(22, 93, 255, 0.10) !important;

      .tagBox {
        &>div {
          border: 0.896px solid #165DFF;
          background: rgba(22, 93, 255, 0.10);
        }
      }
    }
  }
}
</style>